<%--
  Created by IntelliJ IDEA.
  User: 魏宏文
  Date: 2024/6/17
  Time: 14:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="dao.MovieDao" %>
<%@ page import="dao.impl.MovieDaoImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="dao.ScreeningScheduleDao" %>
<%@ page import="dao.impl.ScreeningScheduleDaoImpl" %>
<%@ page import="javax.xml.namespace.QName" %>
<%@ page import="dao.UserDao" %>
<%@ page import="dao.impl.UserDaoImpl" %>
<%@ page import="service.CinemaService" %>
<%@ page import="service.impl.CinemaServiceImpl" %>
<%@ page import="bean.*" %>
<%@ page import="dao.impl.VideoHallDaoImpl" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page import="service.VideoHallService" %>

<%
    MovieDao movieDao = new MovieDaoImpl();
    List<Movie> movieList = movieDao.getAllMovie();

    UserDao userDao = new UserDaoImpl();
    List<User> userList = userDao.getAll();

    ScreeningScheduleDao screeningScheduleDao = new ScreeningScheduleDaoImpl();
    List<ScreeningSchedule> list = screeningScheduleDao.getallScreeningSchedules();

    List<Cinema> cinemaList = new CinemaServiceImpl().getAllCinema();

    List<VideoHall> videoHallList = new VideoHallDaoImpl().getAllVideoHall();
    VideoHallDaoImpl videoHallDao = new VideoHallDaoImpl();

%>
<!DOCTYPE html>
<html lang="en">
<%--<script src="scripts.js"></script>--%>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>电影院管理员管理界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .container {
            display: flex;
            width: 100%;
        }

        .sidebar {
            width: 200px;
            background-color: #333;
            color: white;
            height: 100vh;
            padding-top: 20px;
        }

        .menu {
            list-style: none;
            padding: 0;
        }

        .menu-item {
            padding: 15px 20px;
            cursor: pointer;
        }

        .menu-item:hover {
            background-color: #575757;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
        }

        .section {
            display: none;
        }

        .section.active {
            display: block;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        input[type="text"] {
            margin: 10px;
            padding: 8px;
            width: calc(50% - 40px);
        }

        button {
            padding: 5px 10px;
            margin: 5px;
        }

    </style>
    <link rel="'stylesheet", type="text/css", href="../css/style.css.css">

</head>

<body>
<div class="container">
    <nav class="sidebar">
        <ul class="menu">
            <li class="menu-item" onclick="showSection('screening-management')">电影管理</li>
            <li class="menu-item" onclick="showSection('screening1-management')">放映管理</li>
            <li class="menu-item" onclick="showSection('user-management')">用户管理</li>
        </ul>
    </nav>
    <main class="content">
        <section id="screening-management" class="section">
            <h2>电影管理</h2>

            <!-- 搜索栏 -->
            <input type="text" id="search-movie-name" placeholder="根据电影名称搜索" oninput="searchMovies()">
            <input type="text" id="search-director-name" placeholder="根据导演名称搜索" oninput="searchMovies()">
            <a  class="btn btn-primary" href="addMovie.jsp">添加电影</a>
            <a class="btn btn-primary" href="../user/index.jsp">返回用户端</a>
            <!-- 电影列表表格 -->
            <table id="movies-table">
                <thead>
                <tr>
                    <th>电影名称</th>
                    <th>类型</th>
                    <th>海报</th>
                    <th>主演</th>
                    <th>上映日期</th>
                    <th>时长（分钟）</th>
                    <th>价格（元）</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <% for (Movie movie : movieList) { %>
                <tr>
                    <td hidden="hidden"><%=movie.getId()%></td>
                    <td><%= movie.getName()%></td>
                    <td><%= movie.getType()%></td>
                    <td><img src="../img/movie/<%=movie.getImg()%>" width="50"></td>
                    <td><%= movie.getMain_actor()%></td>
                    <td><%= movie.getDate()%></td>
                    <td><%= movie.getTotalTime()%></td>
                    <td><%= movie.getPrice()%></td>
                    <td>
                        <button onclick="deleteMovie(<%=movie.getId()%>)">删除</button>
                        <button onclick="editMovie(this)">修改</button>
                    </td>
                </tr>
                <% } %>
                </tbody>

            </table>
        </section>
        <section id="screening1-management" class="section">
            <h2>放映管理</h2>

            <!-- 搜索栏 -->
            <input type="text" id="search-screening-name" placeholder="根据影院名称搜索" oninput="searchCinema()">
            <a class="btn btn-primary" href="addScreeningSchedule.jsp">添加放映安排</a>
            <a class="btn btn-primary" href="../user/index.jsp">返回用户端</a>

            <!-- 电影列表表格 -->
            <table id="screen-table">
                <thead>
                <tr>
                    <th hidden="hidden">放映安排编号</th>
                    <th>电影名称</th>
                    <th>影院名称</th>
                    <th hidden="hidden">放映厅编号</th>
                    <th>放映厅名称</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>座位数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                <% for(ScreeningSchedule screeningSchedule : list){%>
                <tr>
                    <td hidden="hidden"><%=screeningSchedule.getId()%></td>
                    <td>
                        <%=screeningSchedule.getMovie().getName()%>
                    </td>
                    <td>
                        <%=screeningSchedule.getCinema().getName()%>
                    </td>
                    <td hidden="hidden"><%=screeningSchedule.getVideoHall().getId()%></td>
                    <td><%=screeningSchedule.getVideoHall().getName()%></td>
                    <td><%=screeningSchedule.getStartTime()%></td>
                    <td><%=screeningSchedule.getEndTime()%></td>
                    <td><%=screeningSchedule.getSeatNum()%></td>
                    <td>
                        <button onclick="deleteScreen(<%=screeningSchedule.getId()%>)">删除</button>
<%--                        <button onclick="editRowScreen(this)">修改</button>--%>
                    </td>
                </tr>
                <% } %>


                </tbody>
            </table>
        </section>
        <section id="user-management" class="section" style="display: none;">
            <h2>用户管理</h2>
            <!-- 搜索栏 -->
            <input type="text" id="search-user-id" placeholder="根据用户ID搜索" oninput="searchUsers()">
            <a class="btn btn-primary" href="../user/index.jsp">返回用户端</a>
            <table id="users-table">
                <thead>

                <tr>
                    <th>用户ID</th>
                    <th>账号</th>
                    <th>密码</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <% for (User user : userList) { %>
                <tr>
                    <td><%= user.getId()%></td>
                    <td><%= user.getName()%></td>
                    <td><%= user.getPassword()%></td>
                    <td><%= user.getMobile()%></td>
                    <td>
                        <button onclick="deleteUser(<%=user.getId()%>)">删除</button>
                        <button onclick="editUser(this)">修改</button>
                    </td>
                </tr>
                <% } %>

                </tbody>
            </table>

        </section>
    </main>
</div>

</body>
<script>
    function showSection(sectionId) {
        const sections = document.querySelectorAll('.section');
        sections.forEach(section => {
            section.style.display = 'none';
        });

        const activeSection = document.getElementById(sectionId);
        if (activeSection) {
            activeSection.style.display = 'block';
        }
    }

    function searchMovies() {
        const movieNameInput = document.getElementById('search-movie-name').value.toLowerCase();
        const directorNameInput = document.getElementById('search-director-name').value.toLowerCase();
        const table = document.getElementById('movies-table');
        const tr = table.getElementsByTagName('tr');

        for (let i = 1; i < tr.length; i++) {
            let tdMovieName = tr[i].getElementsByTagName('td')[0];
            let tdDirectorName = tr[i].getElementsByTagName('td')[3];
            if (tdMovieName && tdDirectorName) {
                let movieName = tdMovieName.textContent.toLowerCase();
                let directorName = tdDirectorName.textContent.toLowerCase();
                if (movieName.indexOf(movieNameInput) > -1 && directorName.indexOf(directorNameInput) > -1) {
                    tr[i].style.display = '';
                } else {
                    tr[i].style.display = 'none';
                }
            }
        }
    }

    function deleteRow(button) {
        const row = button.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }

    function searchCinema() {
        const cinemaNameInput = document.getElementById('search-screening-name').value.trim(); // 获取输入框的值，并去除首尾空格
        const table = document.getElementById('screen-table');
        const tr = table.getElementsByTagName('tr');

        for (let i = 1; i < tr.length; i++) {
            let tdCinemaName = tr[i].getElementsByTagName('td')[0];
            if (tdCinemaName) {
                if (tdCinemaName.textContent.toLowerCase().includes(cinemaNameInput.toLowerCase())) {
                    tr[i].style.display = ''; // 显示符合搜索条件的行
                } else {
                    tr[i].style.display = 'none'; // 隐藏不符合搜索条件的行
                }
            }
        }
    }


    function editUser(button) {
        const row = button.parentNode.parentNode; // 获取当前按钮所在的<tr>元素
        const cells = row.getElementsByTagName('td'); // 获取该行的所有<td>元素

        // 检查按钮文本是否为"保存"，如果是，则收集数据
        if (button.textContent === '保存') {
            // 创建一个数组来存储数据
            const data = [];
            // 遍历除最后一个单元格外的所有单元格
            for (let i = 0; i < cells.length - 1; i++) {
                // 收集每个单元格的文本内容（或innerHTML，取决于您需要的数据）
                data.push(cells[i].textContent); // 或者使用 cells[i].innerHTML
            }

            // 创建参数字符串
            let params = 'userId=' + encodeURIComponent(data[0]) +
                '&name=' + encodeURIComponent(data[1]) +
                '&password=' + encodeURIComponent(data[2]) +
                '&mobile=' + encodeURIComponent(data[3]);
            //异步请求
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "admin_modify_userinfo", true); // 确保这里的 "get_movie" 是您Servlet的正确映射路径
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.onreadystatechange = function () {
                // ... 省略了之前的 readyState 检查 ...
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                        console.log("请求已完成,且响应已就绪");
                        location.reload();
                        // 这里可以处理服务器的响应，或者进行页面刷新等操作
                        // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                        // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                    } else {
                        console.error("请求失败，状态码：" + xhr.status);
                    }
                }
            };
            xhr.send(params); // 发送数据到服务器


            // 现在，data数组包含了该行除按钮外的所有单元格的数据
            // 您可以根据需要处理这些数据，例如发送到服务器

            // 重置按钮为编辑模式，并清除可编辑状态（如果需要）
            for (let i = 0; i < cells.length - 1; i++) {
                cells[i].setAttribute('contenteditable', false);
            }
            button.textContent = '修改';
        } else {
            // 如果按钮文本不是"保存"，则切换可编辑状态
            const isEditable = cells[0].isContentEditable; // 假设第一个单元格的可编辑状态代表整行的状态
            for (let i = 0; i < cells.length - 1; i++) {
                cells[i].setAttribute('contenteditable', !isEditable);
            }
            button.textContent = isEditable ? '修改' : '保存';
        }
    }
    function editMovie(button) {
        const row = button.parentNode.parentNode; // 获取当前按钮所在的<tr>元素
        const cells = row.getElementsByTagName('td'); // 获取该行的所有<td>元素
        // cells[3].contentEditable = 'false';
        // 检查按钮文本是否为"保存"，如果是，则收集数据
        if (button.textContent === '保存') {
            // 创建一个数组来存储数据
            const data = [];
            // 遍历除最后一个单元格外的所有单元格
            for (let i = 0; i < cells.length - 1; i++) {
                // 收集每个单元格的文本内容（或innerHTML，取决于您需要的数据）
                data.push(cells[i].textContent); // 或者使用 cells[i].innerHTML
            }

            // 创建参数字符串
            let params = 'movieId=' + encodeURIComponent(data[0]) +
                '&name=' + encodeURIComponent(data[1]) +
                '&type=' + encodeURIComponent(data[2]) +
                '&img=' + encodeURIComponent(data[3])+
                '&main_actor=' + encodeURIComponent(data[4])+
                '&upTime=' + encodeURIComponent(data[5])+
                '&totalTime=' + encodeURIComponent(data[6])+
                '&price=' + encodeURIComponent(data[7])
            ;
            //异步请求
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "admin_modify_movie", true); // 确保这里的 "get_movie" 是您Servlet的正确映射路径
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.onreadystatechange = function () {
                // ... 省略了之前的 readyState 检查 ...
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                        console.log("请求已完成,且响应已就绪");
                        console.log(params);
                        location.reload();
                        // 这里可以处理服务器的响应，或者进行页面刷新等操作
                        // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                        // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                    } else {

                        console.error("请求失败，状态码：" + xhr.status);
                    }
                }
            };
            xhr.send(params); // 发送数据到服务器


            // 现在，data数组包含了该行除按钮外的所有单元格的数据
            // 您可以根据需要处理这些数据，例如发送到服务器

            // 重置按钮为编辑模式，并清除可编辑状态（如果需要）
            for (let i = 0; i < cells.length - 1; i++) {
                cells[i].setAttribute('contenteditable', false);
            }
            button.textContent = '修改';
        } else {
            // 如果按钮文本不是"保存"，则切换可编辑状态
            const isEditable = cells[0].isContentEditable; // 假设第一个单元格的可编辑状态代表整行的状态
            for (let i = 0; i < cells.length - 1; i++) {
                cells[i].setAttribute('contenteditable', !isEditable);
            }
            button.textContent = isEditable ? '修改' : '保存';
        }
    }

    // document.addEventListener('DOMContentLoaded', () => {
    //     showSection('screening-management'); // 确保此函数存在，用于显示相关部分
    //
    //     // 假设您有一些按钮，您可能需要为它们添加事件监听器
    //     // 例如，如果按钮类名为"edit-save-btn"，您可以这样做：
    //     const editButtons = document.querySelectorAll('.edit-save-btn');
    //     editButtons.forEach(button => {
    //         button.addEventListener('click', editRow);
    //     });
    // });

    document.addEventListener('DOMContentLoaded', () => {
        showSection('screening-management');
    });


    function searchUsers() {
        const userIdInput = document.getElementById('search-user-id').value.trim(); // 获取输入框的值，并去除首尾空格
        const table = document.getElementById('users-table');
        const tr = table.getElementsByTagName('tr');

        for (let i = 1; i < tr.length; i++) { // 从索引1开始遍历，排除表头
            let tdUserId = tr[i].getElementsByTagName('td')[0];
            if (tdUserId) {
                if (tdUserId.textContent.toLowerCase().includes(userIdInput.toLowerCase())) {
                    tr[i].style.display = ''; // 显示符合搜索条件的行
                } else {
                    tr[i].style.display = 'none'; // 隐藏不符合搜索条件的行
                }
            }
        }
    }


    //
    // function deleteUser(button) {
    //     const row = button.parentNode.parentNode;
    //     row.parentNode.removeChild(row);
    // }

    function deleteScreen(screenId) {
        // 使用AJAX发送请求到服务器
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "screen_delete", true); // 确保这里的 "get_movie" 是您Servlet的正确映射路径
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function () {
            // ... 省略了之前的 readyState 检查 ...
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                    console.log("请求已完成,且响应已就绪");
                    location.reload();
                    // 这里可以处理服务器的响应，或者进行页面刷新等操作
                    // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                    // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                } else {
                    console.error("请求失败，状态码：" + xhr.status);
                }
            }
        };
        xhr.send("screenId=" + screenId); // 发送产品ID到服务器

        // 返回false或调用event.preventDefault()都可以阻止默认行为
        // 但由于我们使用了return，所以应该确保函数最后返回一个值
        // 阻止默认的链接点击行为
    }

    function deleteMovie(movieId) {
        // 使用AJAX发送请求到服务器
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "movie_delete", true); // 确保这里的 "get_movie" 是您Servlet的正确映射路径
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function () {
            // ... 省略了之前的 readyState 检查 ...
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                    console.log("请求已完成,且响应已就绪");
                    location.reload();
                    // 这里可以处理服务器的响应，或者进行页面刷新等操作
                    // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                    // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                } else {
                    console.error("请求失败，状态码：" + xhr.status);
                }
            }
        };
        xhr.send("movieId=" + movieId); // 发送产品ID到服务器

        // 返回false或调用event.preventDefault()都可以阻止默认行为
        // 但由于我们使用了return，所以应该确保函数最后返回一个值
        // 阻止默认的链接点击行为
    }

    function deleteUser(userId) {
        // 使用AJAX发送请求到服务器
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "user_delete", true); // 确保这里的 "get_movie" 是您Servlet的正确映射路径
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function () {
            // ... 省略了之前的 readyState 检查 ...
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                    console.log("请求已完成,且响应已就绪");
                    location.reload();
                    // 这里可以处理服务器的响应，或者进行页面刷新等操作
                    // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                    // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                } else {
                    console.error("请求失败，状态码：" + xhr.status);
                }
            }
        };
        xhr.send("userId=" + userId); // 发送产品ID到服务器

        // 返回false或调用event.preventDefault()都可以阻止默认行为
        // 但由于我们使用了return，所以应该确保函数最后返回一个值
        // 阻止默认的链接点击行为
    }

    // function editUser(button) {
    //     const row = button.parentNode.parentNode;
    //     const cells = row.getElementsByTagName('td');
    //     const isEditable = Array.from(cells).slice(1, -1).every(cell => cell.isContentEditable);
    //
    //     if (isEditable) {
    //         // 如果处于可编辑状态，点击保存按钮时获取数据
    //         const rowData = {};
    //         for (let i = 0; i < cells.length; i++) {
    //             rowData['column' + i] = cells[i].textContent;
    //         }
    //         // 使用AJAX发送请求到服务器
    //         var xhr = new XMLHttpRequest();
    //         xhr.open("POST", "user_delete", true); // 确保这里的 "get_movie" 是您Servlet的正确映射路径
    //         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //
    //         xhr.onreadystatechange = function () {
    //             // ... 省略了之前的 readyState 检查 ...
    //             if (xhr.readyState === 4) {
    //                 if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
    //                     console.log("请求已完成,且响应已就绪");
    //                     location.reload();
    //                     // 这里可以处理服务器的响应，或者进行页面刷新等操作
    //                     // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
    //                     // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
    //                 } else {
    //                     console.error("请求失败，状态码：" + xhr.status);
    //                 }
    //             }
    //         };
    //         xhr.send("userId=" + userId); // 发
    //         // 这里可以将 rowData 发送给服务器或者进行其他处理
    //     }
    //     Array.from(cells).slice(1, -1).forEach(cell => {
    //         cell.setAttribute('contenteditable', !isEditable);
    //     });
    //
    //     // Update button text
    //     button.textContent = isEditable ? '修改' : '保存';
    // }


</script>
</html>